<script setup lang='ts'>
  import { reactive } from 'vue';
  import { propApi } from '@/api/controller';
  import { giftClassifyList } from '@/pinia/getter';
  import { getSummaries } from '@/utils';
  import { Toastloading } from '@/utils/public';
  const $emit = defineEmits(['updateList'])
  const action = reactive({
    title:'',
    dialogFormVisible:false,
    list:[] as any[],
  })
  const getList = async(user_id:number | string = '')=> {
    const loading = Toastloading()
    const res = await propApi.giftBagList({
      user_id
    })
    loading.close()
    const { data=[], total=0, } = res?.data || {}
    action.list = data
  }
  const openDialog = async(query:any = {})=> {
    const {
      user_id, nickname
    } = query
    await getList(user_id)
    action.title = `用户：${nickname}背包礼物`
    action.dialogFormVisible = true
  }
  const closeDialog = ()=>{
    action.dialogFormVisible = false
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
    top="5vh"
    class="xm-dialog input-width"
    v-model="action.dialogFormVisible"
    width="60%"
    :title="action.title">
      <el-table
        class="xm-main xm-TableCenter"
        :data="action.list"
        border
        show-summary
        height="460"
        :summary-method="((param:any)=>getSummaries(param,[0,1,2,3,4]))"
      >
        <el-table-column width="100" prop="id" label="记录ID" />
        <el-table-column width="80" prop="gift_id" label="礼物ID" />
        <el-table-column min-width="180" prop="gift_name" label="礼物名称" />
        <el-table-column width="100" prop="gift_price" label="礼物价格" />
        <el-table-column min-width="120" prop="gift_type" label="礼物类型" >
          <template #default="scoped">
            {{ giftClassifyList.find(res=>res.type == scoped.row.gift_type)?.label || scoped.row.gift_type }}
          </template>
        </el-table-column>
        <el-table-column sortable min-width="120" prop="avail" label="礼物数量" />
        <el-table-column sortable min-width="120" prop="total_price" label="总价值" />
      </el-table>
    </el-dialog>
  </div>
</template>